<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>dalao的博客</title>
    <link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/googlecode.min.css" rel="stylesheet">
    <link href="../common/iconfont.css" rel="stylesheet" />
    <link href="./index.css" rel="stylesheet" />
</head>

<body class="s-bg">
    <canvas id="cvs"></canvas>
    <!--博客主页-->
    <div id="app">
        <m-hd></m-hd>
        <m-nav></m-nav>
        <section class="m-bd">
            <section class="u-bd m-ls-article">
                <h3 class="u-sec-tt">
                    <i class="u-icon">&#xe6b6;</i>
                    <span>文章</span>
                </h3>
                <m-cell-article v-for="index in 10"></m-cell-article>
                <a class="u-add-more">加载更多</a>
            </section>
            <aside class="u-ft m-lt">
                <div class="m-ls-sd">
                    <h3 class="u-sec-tt">
                        <i class="u-icon">&#xe9d0;</i>
                        <span>归档</span>
                    </h3>
                    <ul>
                        <li>
                            <a>
                                <i class="u-icon">&#xe600;</i>
                                <span>2016-12-8</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <i class="u-icon">&#xe600;</i>
                                <span>2016-12-8</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <i class="u-icon">&#xe600;</i>
                                <span>2016-12-8</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <i class="u-icon">&#xe600;</i>
                                <span>2016-12-8</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <i class="u-icon">&#xe600;</i>
                                <span>2016-12-8</span>
                            </a>
                        </li>
                    </ul>
                    <a class="u-add-more">加载更多</a>
                </div>
                <div class="m-ls-sd">
                    <h3 class="u-sec-tt">
                        <i class="u-icon">&#xe694;</i>
                        <span>目录</span>
                    </h3>
                    <ul>
                        <li>
                            <a>
                                <i class="u-icon">&#xe6b6;</i>
                                <span>这是大佬写的一个标题这是大佬写的一个标题</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <i class="u-icon">&#xe6b6;</i>
                                <span>这是大佬写的一个标题这是大佬写的一个标题</span>
                            </a>
                        </li>
                    </ul>
                    <a class="u-add-more">加载更多</a>
                </div>
                <div class="m-ls-sd">
                    <h3 class="u-sec-tt">
                        <i class="u-icon">&#xe661;</i>
                        <span>友链</span>
                    </h3>
                    <ul>
                        <li>
                            <a>
                                <i class="u-icon">&#xe647;</i>
                                <span>2016年12月</span>
                            </a>
                        </li>
                    </ul>
                    <a class="u-add-more">加载更多</a>
                </div>
                <div class="m-ls-sd">
                    <h3 class="u-sec-tt">
                        <i class="u-icon">&#xe605;</i>
                        <span>标签</span>
                    </h3>
                    <div class="u-tag">
                        <span>测试</span>
                        <span>测试</span>
                        <span>测试</span>
                        <span>测试</span>
                        <span>测试</span>
                    </div>
                    <a class="u-add-more">加载更多</a>
                </div>
            </aside>
        </section>
    </div>
    <footer class="m-ft">
        <p>来自express框架！</p>
    </footer>
    <div id="template">
        <!--头信息-->
        <template id="m_hd">
            <header class="m-hd">
                <div class="u-hd">
                    <img src="http://imgsrc.baidu.com/forum/w=580/sign=54cd042fd5c451daf6f60ce386fd52a5/25af400ed9f9d72a2f418c6cdc2a2834359bbbfa.jpg" />
                </div>
                <div class="u-bd">
                    <h1>dalao的博客</h1>
                    <p>你们啊，不要老是想着搞个大新闻！你们啊，不要老是想你们啊，不要老是想着搞个大新闻！你们啊，不要老是想</p>
                </div>
            </header>
        </template>


        <!--导航栏-->
        <template id="m_nav">
            <nav class="m-nav">
                <a v-for="item,index in list" :class="{'z-atv':nAtv==index}" @click="eItemClick(index)">
                    <i class="u-icon" v-html="item[0]"></i>
                    <span>{{item[1]}}</span>
                </a>
            </nav>
        </template>

        <template id="m_"></template>

        <!--文章列表项-->
        <template id="m_cell_article">
            <div class="m-cell">
                <div class="u-hd"></div>
                <div class="u-bd m-cell-article">
                    <h2 class="u-sec-tt">这是大佬写的一个标题</h2>
                    <article class="m-ct">
                        <p>这是大佬写的一个段落这是大佬写的一个段落这是大佬写的一个段落这是大佬写的一个段落这是大佬写的一个段落</p>
                    </article>
                    <div class="u-info m-info-article">
                        <p>
                            <i class="u-icon">&#xe605;</i>
                            <span>测试</span>
                        </p>
                        <p>
                            <i class="u-icon">&#xe645;</i>
                            <span>100</span>
                        </p>
                        <p>
                            <i class="u-icon">&#xe600;</i>
                            <span>2016-12-8</span>
                        </p>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script src="./index.js"></script>
</body>

</html>